<template>
 <div class="ICONS">
    <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) in pages" :key="index">   
            <div class="icon"  v-for="ilist in page" :key="ilist.id">
            <div class="icon_IMG">
                <img :src="ilist.imgUrl" alt="" srcset="">
                <p class="icon_desc">{{ilist.desc}}</p>
            </div>
            </div>
        </swiper-slide>
       
       </swiper>
 </div>
</template>

<script>
 export default {
     props:{
        List:Array
     },
   data () {
     return {
        swiperOption:{

        }
     }
   },
   computed:{
       pages () {
           const pages = []
           this.List.forEach((item , index) =>{
               const page = Math.floor(index /8 )
               if(!pages[page]){
                   pages[page]= []
               }
               pages[page].push(item) 
           })
           return pages
       }
   },
   components: {

   }
 }
</script>

<style lang="stylus" scoped>
    @import '~style/mixins.styl'
    .ICONS >>> .swiper-container{
        height: 0;
        padding-bottom: 50%;
    }
    .icon{
        float: left;
        width: 25%;
        overflow: hidden;
        padding-bottom: 25%;

        height: 0;
        position: relative;
    }
    .icoicon_IMG{
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 5px;
        right: 0;
        bottom: 22px;
    }
    img{
        width:60px;height: 60px;
      display: block;margin: 0 auto;
    }
    .icon_desc{
          position: absolute;
        left: 0;
          right: 0;
          height: 10px;text-align: center;
          line-height:10px;
          
        bottom: 0px;
  
            /* chaohu.... ..显示 */
            ellipsis()
  }
</style>
